<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Chain Responsive Bootstrap3 Admin</title>

        <link href="css/style.default.css" rel="stylesheet">
        <link href="css/morris.css" rel="stylesheet">
    </head>

    <body>
    <header>
            <div class="headerwrapper">
            <!--    <div class="header-left">
                    <a href="index.html" class="logo">

                    </a>
                </div> header-left -->
                <img src="images/logo.png" alt="" />
                

            </div><!-- headerwrapper -->
        </header>

        <section>
            <div class="mainwrapper">
                <div class="leftpanel">
                    <div class="media profile-left">
                        <a class="pull-left profile-thumb" href="profile.html">
                            <img class="img-circle" src="images/photos/profile.png" alt="">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">Elen Adarna</h4>
                            <small class="text-muted">Beach Lover</small>
                        </div>
                    </div><!-- media -->

                    <h5 class="leftpanel-title">导航</h5>
                   <ul class="nav nav-pills nav-stacked">
                        <li><a href="index.html"><i class="fa fa-home"></i> <span>主页</span></a></li>
                        <li class="parent"><a href=""><i class="fa fa-bars"></i> <span>查询</span></a>
                            <ul class="children">
                                <li><a href="search.html">日志查询</a></li>
                            </ul>
                        </li>
                        <li class="parent active"><a href=""><i class="fa fa-edit"></i> <span>统计</span></a>
                            <ul class="children">
                                <li><a href="tj_yhbl.html">用户比例统计</a></li>
                            </ul>
                            <ul class="children">
                                <li><a href="tj_yhpm.html">用户排名统计</a></li>
                            </ul>
                            <ul class="children">
                                <li><a href="tj_bbl.html">表比例统计</a></li>
                            </ul>
                            <ul class="children">
                                <li class="active"><a href="tj_bpm.html">表排名统计</a></li>
                            </ul>
                        </li>
                        <li class="parent"><a href=""><i class="fa fa-exclamation-circle"></i> <span>警告通知</span></a>
                          <ul class="children">
                                <li><a href="czplsz.html">操作频率设置</a></li>
                                <li><a href="czjlssz.html">操作记录数设置</a></li>
                                <li><a href="tzck.html">通知查看</a></li>
                            </ul>
                        </li>
                        <li class="parent"><a href=""><i class="fa fa-cogs"></i> <span>系统管理</span></a>
                            <ul class="children">
                                <li ><a  href="user.html">用户管理</a></li>
                                <li><a href="jdck.html">节点查看</a></li>
                                <li ><a href="tbEtl.html">数据抽取配置</a></li>
                            </ul>
                        </li>
                    </ul>
                    </ul>
                </div><!-- leftpanel -->

                <div class="mainpanel">
                    <div class="pageheader">
                        <div class="media">
                            <div class="pageicon pull-left">
                                <i class="fa fa-bar-chart-o"></i>
                            </div>
                            <div class="media-body">
                                <ul class="breadcrumb">
                                    <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                                    <li>表统计</li>
                                </ul>
                                <h4>表统计</h4>
                            </div>
                        </div><!-- media -->
                    </div><!-- pageheader -->

                    <div class="contentpanel">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <div class="panel-btns">
                                    <a href="" class="panel-minimize tooltips" data-toggle="tooltip" title="Minimize Panel"><i class="fa fa-minus"></i></a>
                                    <a href="" class="panel-close tooltips" data-toggle="tooltip" title="Close Panel"><i class="fa fa-times"></i></a>
                                </div><!-- panel-btns -->
                                <h4 class="panel-title">图表</h4>
                            </div><!-- panel-heading -->
                            <div class="panel-body">

                                <div class="row">
                                    <div class="col-md-12 mb30">
                                        <h5 class="lg-title mb10">柱状图</h5>
                                        <p>统计近期类表访问排名前三的表访问次数</p>
                                        <div id="barChart" style="width:100%;height:500px;"></div>
                                    </div><!-- col-md-6 -->
                                </div><!-- row -->
                            </div><!-- panel-body -->

                        </div><!-- panel -->
                    </div><!-- contentpanel -->

                </div><!-- mainpanel -->
            </div><!-- mainwrapper -->
        </section>


        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/modernizr.min.js"></script>
        <script src="js/pace.min.js"></script>
        <script src="js/retina.min.js"></script>
        <script src="js/jquery.cookies.js"></script>

        <script src="js/flot/jquery.flot.min.js"></script>
        <script src="js/flot/jquery.flot.resize.min.js"></script>
        <script src="js/flot/jquery.flot.symbol.min.js"></script>
        <script src="js/flot/jquery.flot.crosshair.min.js"></script>
        <script src="js/flot/jquery.flot.categories.min.js"></script>
        <script src="js/flot/jquery.flot.pie.min.js"></script>
        <script src="js/morris.min.js"></script>
        <script src="js/raphael-2.1.0.min.js"></script>
        <script src="js/jquery.sparkline.min.js"></script>

        <script src="js/echarts.js"></script>
    <script type="text/javascript">
              $(function () {
                tb_barChart();
              });
//柱状图
    function tb_barChart(){
          var barChart = echarts.init(document.getElementById('barChart'));
         $.ajax({
                url: 'CxtjController/getBarTb.do',
                type: 'POST',
                data: {},
                success:function(data){
                 //   alert(JSON.stringify(data.series[1]));
                     var posList = [
                            'left', 'right', 'top', 'bottom',
                            'inside',
                            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                            ];

                    option = {
                                color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                legend: {
                                    data:data.items      //['Forest', 'Steppe', 'Desert', 'Wetland']
                                },
                                toolbox: {
                                    show: true,
                                    orient: 'vertical',
                                    left: 'right',
                                    top: 'center',
                                    feature: {
                                        mark: {show: true},
                                        dataView: {show: true, readOnly: false},
                                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                        restore: {show: true},
                                        saveAsImage: {show: true}
                                    }
                                },
                                calculable: true,
                                xAxis: [
                                    {
                                        type: 'category',
                                        axisTick: {show: false},
                                        data: data.titles
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series:data.series
                    };
                    barChart.setOption(option);
                }
            });
     }
</script>
 <script src="js/custom.js"></script>
        <script>
            jQuery(document).ready(function(){

                // Delete row in a table
                jQuery('.delete-row').click(function(){
                    var c = confirm("Continue delete?");
                    if(c)
                        jQuery(this).closest('tr').fadeOut(function(){
                        jQuery(this).remove();
                    });
                    return false;
                });

                // Show aciton upon row hover
                jQuery('.table tbody tr').hover(function(){
                    jQuery(this).find('.table-action-hide a').animate({opacity: 1},100);
                },function(){
                    jQuery(this).find('.table-action-hide a').animate({opacity: 0},100);
                });

            });
        </script>

    </body>
</html>
